<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>批量对口型视频任务状态</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .container {
            background-color: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .status {
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        .status-running {
            background-color: #cce5ff;
            color: #004085;
        }
        .status-completed {
            background-color: #d4edda;
            color: #155724;
        }
        .status-failed {
            background-color: #f8d7da;
            color: #721c24;
        }
        .progress {
            height: 25px;
            margin: 20px 0;
        }
        .result-item {
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .download-link {
            display: inline-block;
            margin-top: 10px;
            padding: 5px 10px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 3px;
        }
        .download-link:hover {
            background-color: #0056b3;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">批量对口型视频任务状态</h1>
        
        <div class="task-info">
            <h5>任务信息</h5>
            <p><strong>任务ID:</strong> <span id="task_id">{{ task_id }}</span></p>
            <p><strong>状态:</strong> <span id="task_status" class="status status-pending">等待中</span></p>
            <p><strong>Excel文件:</strong> <span id="excel_path">{{ task_info.excel_path }}</span></p>
            <p><strong>输出目录:</strong> <span id="output_dir">{{ task_info.output_dir }}</span></p>
        </div>
        
        <div class="progress">
            <div id="progress_bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <p><strong>总视频数:</strong> <span id="total_videos">0</span></p>
            </div>
            <div class="col-md-6">
                <p><strong>已完成:</strong> <span id="completed_videos">0</span></p>
            </div>
        </div>
        
        <div class="results">
            <h5>处理结果</h5>
            <div id="results_container">
                <!-- 结果将通过JavaScript动态加载 -->
            </div>
        </div>
        
        <a href="{{ url_for('index') }}" class="back-link">← 返回主页</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 定期检查任务状态
        function checkTaskStatus() {
            const taskId = document.getElementById('task_id').textContent;
            
            fetch(`/batch-lipsync-task-status/${taskId}`)
                .then(response => response.json())
                .then(data => {
                    // 更新任务状态
                    document.getElementById('task_status').textContent = data.status;
                    document.getElementById('task_status').className = 'status status-' + data.status.toLowerCase();
                    
                    // 更新进度条
                    document.getElementById('progress_bar').style.width = data.progress + '%';
                    
                    // 更新计数
                    document.getElementById('total_videos').textContent = data.total_videos;
                    document.getElementById('completed_videos').textContent = data.completed_videos;
                    
                    // 更新结果
                    updateResults(data.results);
                    
                    // 如果任务未完成，继续检查
                    if (data.status !== 'completed' && data.status !== 'failed') {
                        setTimeout(checkTaskStatus, 2000);
                    }
                })
                .catch(error => {
                    console.error('检查任务状态出错:', error);
                    setTimeout(checkTaskStatus, 5000);
                });
        }
        
        // 更新结果列表
        function updateResults(results) {
            const container = document.getElementById('results_container');
            container.innerHTML = '';
            
            if (!results || results.length === 0) {
                container.innerHTML = '<p>暂无处理结果</p>';
                return;
            }
            
            results.forEach(result => {
                const resultDiv = document.createElement('div');
                resultDiv.className = 'result-item';
                
                let resultHtml = `
                    <h6>视频ID: ${result.video_id}</h6>
                    <p><strong>状态:</strong> <span class="status status-${result.status}">${result.status}</span></p>
                `;
                
                if (result.status === 'completed') {
                    resultHtml += `
                        <p><strong>视频URL:</strong> <a href="${result.video_url}" target="_blank">${result.video_url}</a></p>
                    `;
                    
                    if (result.video_local_path) {
                        // 从本地路径提取文件名用于下载链接
                        const fileName = result.video_local_path.split('/').pop().split('\\').pop();
                        resultHtml += `
                            <p><strong>本地文件:</strong> ${fileName}</p>
                            <a href="/download?filepath=${encodeURIComponent(result.video_local_path)}" class="download-link" target="_blank">下载视频</a>
                        `;
                    }
                } else if (result.status === 'failed') {
                    resultHtml += `<p><strong>错误信息:</strong> ${result.error}</p>`;
                }
                
                resultDiv.innerHTML = resultHtml;
                container.appendChild(resultDiv);
            });
        }
        
        // 页面加载完成后开始检查任务状态
        document.addEventListener('DOMContentLoaded', function() {
            checkTaskStatus();
        });
    </script>
</body>
</html>